import { Select, TimePicker } from "antd";
import "./index.less";

const { Option } = Select;
const { RangePicker } = TimePicker;
let week: any = [
  { name: "周一", value: "1" },
  { name: "周二", value: "2" },
  { name: "周三", value: "3" },
  { name: "周四", value: "4" },
  { name: "周五", value: "5" },
  { name: "周六", value: "6" },
  { name: "周日", value: "7" },
];
const WorkWeek = ({ id, setWeek, setTime }: any) => {
  return (
    <>
      <div className="flex items-center mb-16">
        <span className="li-title">工作周期：</span>
        <div id={id}>
          <Select
            allowClear
            showArrow
            mode="tags"
            getPopupContainer={(): any => document.getElementById(id)}
            style={{ width: 380 }}
            listHeight={500}
            placeholder="请选择工作周期"
            defaultValue={[]}
            onChange={(e: any) => {
              //   item.week = e;
              setWeek(e);
            }}
            dropdownRender={menu => (
              <div className="scrollY max-h-250 week-days">{menu}</div>
            )}>
            {week.map((weekItem: any) => {
              return (
                <Option key={weekItem.value} value={weekItem.value}>
                  {weekItem.name}
                </Option>
              );
            })}
          </Select>
        </div>
      </div>
      {/* 上线时间渲染 */}
      <div className="flex items-center mb-16">
        <span>上线时间：</span>
        <div>
          <RangePicker
            placeholder={["开始时间", "结束时间"]}
            onChange={(date: any, dateString: any) => {
              //   item.time = dateString;
              setTime(dateString);
              // console.log(date, dateString);
            }}
          />
        </div>
      </div>
    </>
  );
};

export default WorkWeek;
